<template>
  <div>
    <!-- 标题 -->
    <van-nav-bar
      title=""
      left-arrow
      @click-left="onClickLeft"
    />
    <van-tabs
      v-model="activeName"
      swipeable
      @click="onClickTab"
    >
      <van-tab title="全部">
        <div class="box">
          <div class="p_box">
            <van-row
              v-for="p in product"
              :key="p.ProductId"
              class="product"
              @click="tomodule(p.Productid)"
            >
              <van-col span="4">
                <van-image
                  :src="'apis/kuan_api/ProductImg/'+p.ProductImg"
                  fit="contain"
                />
              </van-col>
              <van-col span="14">
                <p class="name">{{p.ProductName}}</p>
                <p class="hot">{{p.hot}}热度</p>
              </van-col>
              <van-col span="6">
                <p style="text-align:center">{{p.rate}}</p>
                <p style="text-align:center">
                  <!-- <van-rate
                    v-model="p.rate"
                    :size="12"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                    readonly
                    allow-half
                  /> -->
                </p>
              </van-col>
            </van-row>
          </div>
        </div>
      </van-tab>
      <van-tab
        :title="item.ProductCategory"
        v-for="item in product"
        :key="item.ProductId"
        :name="item.ProductCategory"
      >

        <div class="box">
          <div class="p_box">
            <van-row
              v-for="sp in sonproduct"
              :key="sp.ProductId"
              class="product"
              @click="tomodule(sp.Productid)"
            >
              <van-col span="4">
                <van-image
                  :src="'apis/kuan_api/ProductImg/'+sp.ProductImg"
                  fit="contain"
                />
              </van-col>
              <van-col span="14">
                <p class="name">{{sp.ProductName}}</p>
                <p class="hot">{{sp.hot}}热度</p>
              </van-col>
              <van-col span="6">
                <p style="text-align:center">{{sp.rate}}</p>
                <p style="text-align:center">
                  <!-- <van-rate
                    v-model="p.rate"
                    :size="12"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                    readonly
                    allow-half
                  /> -->
                </p>
              </van-col>
            </van-row>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: "category",
  data() {
    return {
      activeName: "全部",
      brandid: "",
      product: [],
      sonproduct: [],
    };
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    // 获取产品
    getproduct() {
      this.axios
        .post("apis/kuan_api/getproduct.php", {
          brandid: this.brandid,
        })
        .then((res) => {
          this.product = res.data.product;
          console.log(res.data);
        });
    },
    onClickTab() {
      this.axios
        .post("apis/kuan_api/getproduct.php", {
          brandid: this.brandid,
          productcategory: this.activeName,
        })
        .then((res) => {
          this.sonproduct = res.data.product;
          console.log(res.data.product);
        });
      console.log(this.activeName);
    },
    tomodule(ProductId) {
      this.$router.push({
        path: "/module",
        query: { productid: ProductId },
      });
    },
  },
  created() {
    this.brandid = this.$route.query.brandid;
    this.getproduct();
  },
};
</script>

<style scoped>
.box {
  padding-top: 10px;
  background-color: #f2f1f6;
}
p {
  margin: 5px;
}
.p_box {
  width: 95%;
  margin: 0 auto;
  background-color: white;
  border-radius: 5px;
}
.product {
  margin: 5px;
  padding: 10px;
}
.name {
  font-size: 15px;
}
.hot {
  font-size: 10px;
  color: gray;
}
</style>